<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品展示页面</title>
    <script type="text/javascript" src="/static/yperp/js/jquery.min.js"></script>
    <script src="/static/yperp/js/LoopSlider.js"></script>

    <style>
        .product-container {
            width: 100%;
            max-width: 500px;
            /* 根据手机屏幕宽度调整 */
            margin: 0 auto;
        }

        .header-carousel {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
        }

        .header-carousel .header-image {
            /* width: 100%;
            height: 200px; */
            /* 根据需求调整头图高度 */
            object-fit: cover;
            scroll-snap-align: start;
            margin-right: 10px;
        }

        .header-carousel .header-image.active {
            opacity: 1;
        }

        .price {
            text-align: center;
            font-size: 24px;
            margin: 20px 0;
        }

        .detail-images {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .detail-images .detail-image {
            width: 100%;
            /* height: 200px; */
            /* 根据需求调整详情图高度 */
            object-fit: contain;
        }

        .content {
            /* 给定容器宽高度 */
            width: 100%;
            overflow: hidden;
            height: 500px;
            position: relative;
            margin: 100px auto;
            background-color: #ccc;
        }

        img {
            height: 100%;
            width: 100%;
        }

        .points {
            position: absolute;
            z-index: 5;
            list-style: none;
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: hsla(0, 0%, 0%, 0.2);
            bottom: 5px;
            left: 40%;
            height: 20px;
            border-radius: 25px;
            right: 40%;
        }

        .points li {
            cursor: pointer;
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0px auto;
            border-radius: 15px;
            background-color: cadetblue;
        }

        .active {
            background-color: hsla(0, 0%, 100%, 1.00) !important;
        }

        .prev {

            border-radius: 0 30px 30px 0;
        }

        .next,
        .prev {
            appearance: menu;
            margin: 0 auto;
            width: 40px;
            display: block;
            float: left;
            height: 40px;
            position: absolute;
            line-height: 40px;
            text-align: center;
            font-family: "宋体";
            color: aliceblue;
            z-index: 999;
            background-color: hsla(0, 0%, 0%, 0.1);
            top: 45%;
            -webkit-appearance: button;
            cursor: pointer;
        }

        .next {
            right: 0px;
            border-radius: 30px 0 0 30px;
        }

        .prev:hover {
            background-color: hsla(0, 0%, 0%, 0.5);
        }

        .next:hover {
            background-color: hsla(0, 0%, 0%, 0.5);
        }
    </style>
</head>

<body>
    <div class="product-container">
        <div class="header-carousel">
            <div class="content">
                {volist name="header" id="image"}
                <img src="{$image}">
                {/volist}
            </div>
        </div>
        <div class="price">供货价：￥{$goods_sku['supplyPrice']}</div>
        <div class="detail-images">
            <!-- 商品详情图片 -->
            {volist name="body" id="image"}
            <img src="{$image.imageUrl}" class="detail-image">
            {/volist}
        </div>
    </div>
    <script>
        LoopSlider.init({
            el: ".content", //选择器
            navigator: {
                //前进后退按钮
                prevEl: ".prev",
                nextEl: ".next"
            },
            easing: "ease", //动画效果cubic-bezier(0.985, -0.060, 0.000, 1.320)
            duration: 300, //过渡时间，默认为3000ms,
            autoplay: false, //boolean 和 number 设置为true 默认延时为3s,如果设置为1000，延时为1s
        })
    </script>
</body>

</html>